<template>
	<div class="menu-item flex-cnt-btwn">
		<div class="name">{{title}}</div>
		<div class="icon flex-cnt-cnt">
			<span v-bind:class="icon"></span>
		</div>
	</div>
</template>
<script>
export default {
	name: 'menu-item',
	props: {
		'title': {
			type: String
		},
		'icon': {
			type: String
		}
	}
}
</script>
<style lang="less" scoped>
	.menu-item {
		margin-bottom: 10px;
		.name {
			background-color: #FAFAFA;
			padding: 5px 8px;
			box-shadow: 1px 0 5px #999;
			color: #333;
		}
		.icon {
			width: 40px;
			height: 40px;
			background-color: #FAFAFA;
			border-radius: 50%;
			box-shadow: 1px 0 5px #999;
			color: #666;
		}
	}
</style>

